<template>
    <div class="content-box">
        <div class="toplist clearfix">
            <div class="leftFloat">
                <div class="benchCardCenter">
                    <p>
                        <span>昨天订单数量</span>
                    </p>
                    <p>
                        <span class="price-box">{{toplilst.aPrice}}</span>
                    </p>
                </div>
                <div class="benchCardCenter">
                    <p>
                        <span>昨天订单流水</span>
                    </p>
                    <p>
                        <span class="price-box">{{toplilst.aPrice}}</span>
                    </p>
                </div>
                <div class="benchCardCenter">
                    <p>
                        <span>昨天付费人数</span>
                    </p>
                    <p>
                        <span class="price-box">{{toplilst.aPrice}}</span>
                    </p>
                </div>
            </div>
            <div class="rightFloat">
                <div class="benchCardCenter">
                    <p>
                        <span>咨询师数量</span>
                    </p>
                    <p>
                        <span class="price-box">{{toplilst.aPrice}}</span>
                    </p>
                </div>
                <div class="benchCardCenter">
                    <p>
                        <span>用户数量</span>
                    </p>
                    <p>
                        <span class="price-box">{{toplilst.aPrice}}</span>
                    </p>
                </div>
                <div class="benchCardCenter">
                    <p>
                        <span>付费人数</span>
                    </p>
                    <p>
                        <span class="price-box">{{toplilst.aPrice}}</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="containerBox clearfix">
            <div class="leftCon">
                <div>
                    <div class="serchBox clearfix">
                        <div class="leftTitle">
                            进行中的咨询
                        </div>
                        <div class="rightFloat">
                            <el-button type="primary" link >全部咨询</el-button>
                        </div>
                    </div>
                    <div class="leftListCon">

                    </div>
                </div>
                <div>
                    <div class="serchBox clearfix">
                        <div class="leftTitle">
                            待办通知  &nbsp;&nbsp;
                            <el-badge :value="messageNum" class="item">
                                <div>
                                    <span class="icons">
                                    <el-icon><Bell /></el-icon>
                                    </span>
                                </div>
                            </el-badge>
                        </div>
                        <div class="rightFloat">
                            <el-button type="primary">清空通知</el-button>
                        </div>
                    </div>
                    <div class="leftListCon">

                    </div>
                </div>
            </div>
            <div class="rightCon">
                <div>
                    <div class="serchBox clearfix">
                        <div class="leftTitle">
                            便捷导航
                        </div>
                    </div>
                    <div class="rightListCon clearfix">
                        <div class="toMorePage" v-for="item in morePageList" :key="item.id"><span>{{item.name}}</span></div>
                    </div>
                </div>
                <div>
                    <div class="serchBox clearfix">
                        <div class="leftTitle">
                            昨天流量指数
                        </div>
                    </div>
                    <div class="rightListCon flex_container">
                        <div class="">
                            <div class="chart-box">
                                <BarChartVue :options-func="chartOptionFunc1"></BarChartVue>
                            </div>
                        </div>
                        <div class="">
                            <div class="chart-box">
                                <BarChartVue :options-func="chartOptionFunc2"></BarChartVue>
                            </div>
                        </div>
                        <div class="">
                            <div class="chart-box">
                                <BarChartVue :options-func="chartOptionFunc3"></BarChartVue>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="serchBox clearfix">
                        <div class="leftTitle">
                            热门咨询师TOP10
                        </div>
                    </div>
                    <div class="rightListCon clearfix">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
// 引入图表
import BarChartVue from '@/components/chart/ringChart.vue'


const value2 = ref('');
const dateValueWeek = ref('');
const dateValueMonth = ref('');
const dateValueDates = ref('');
const dateType = ref('dates');
const morePageList = [{id:1,name:'咨询订单',routers:''},
{id:2,name:'预约记录',routers:''},
{id:3,name:'咨询服务管理',routers:''},
{id:4,name:'排班时间管理',routers:''},
{id:5,name:'广告管理',routers:''},
{id:6,name:'优惠券管理',routers:''},
{id:7,name:'咨询师管理',routers:''},
{id:8,name:'团体小组',routers:''},];
const messageNum = ref(0);
// 时间选择器options
const options = [
  {
    value: 'dates',
    label: '按天',
  },
  {
    value: 'week',
    label: '按周',
  },
  {
    value: 'month',
    label: '按月',
  }
]
let monthChoose = (val: any) => {
    console.log(val)

}
let toplilst = {
    aPrice: '0'
}

// 第一个参数为echarts对象  第二个能拿到的是初始化后的当前的echarts实例
function chartOptionFunc1(echarts: any, baseChart: any) {
// 配置初始状态对象  最好这个配置直接去echarts官方直接复制过来，方便又轻松
    const optionObj = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 1
            },
            label: {
                show: true,
                position: 'center',
                fontSize: 10,
                fontWeight: 'bold',
                formatter: function (params:any) {
                    let str =
                    '{a|环比增长}{abg|}\n{hr|}\n {per|' +
                        params.data.num +'%}' ;
                    return str;
                },
                rich: {
                    a: {
                        color: '#6E7079',
                        align: 'center',
                        fontWeight: 'bold',
                    },
                    per: {
                        color: '#333333',
                        fontSize: 14,
                        fontWeight: 'bold',
                    },
                },
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 0, name: '浏览数',num:'10'},
            ]
            }
        ]
    }
// 监听数据更新来更新图表 可以响应式更新图表内容
// watch(EnterpriseDistributionlabel, () => {
//     baseChart.setOption(optionObj)
// })
return optionObj
}

// 第一个参数为echarts对象  第二个能拿到的是初始化后的当前的echarts实例
function chartOptionFunc2(echarts: any, baseChart: any) {
// 配置初始状态对象  最好这个配置直接去echarts官方直接复制过来，方便又轻松
    const optionObj = {
        color: '#ffc426',
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 1
            },
            label: {
                show: true,
                position: 'center',
                fontSize: 10,
                fontWeight: 'bold',
                // 重置label内容项展示
                formatter: function (params:any) {
                    let str =
                    '{a|环比增长}{abg|}\n{hr|}\n {per|' +
                        params.data.num +'%}' ;
                    return str;
                },
                rich: {
                    a: {
                        color: '#6E7079',
                        align: 'center',
                        fontWeight: 'bold',
                    },
                    per: {
                        color: '#333333',
                        fontSize: 14,
                        fontWeight: 'bold',
                    },
                },
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 10, name: '访客数',num:'10',itemStyle:''},
                { value: 90, num:'10', itemStyle: { color: '#efefef' } }
            ]
            }
        ]
    }
// 监听数据更新来更新图表 可以响应式更新图表内容
// watch(EnterpriseDistributionlabel, () => {
//     baseChart.setOption(optionObj)
// })
return optionObj
}

// 第一个参数为echarts对象  第二个能拿到的是初始化后的当前的echarts实例
function chartOptionFunc3(echarts: any, baseChart: any) {
// 配置初始状态对象  最好这个配置直接去echarts官方直接复制过来，方便又轻松
    const optionObj = {
        color: "#36d57d",
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center',
        },
        series: [
            {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 1
            },
            label: {
                show: true,
                position: 'center',
                fontSize: 10,
                fontWeight: 'bold',
                formatter: function (params:any) {
                    let str =
                    '{a|环比增长}{abg|}\n{hr|}\n {per|' +
                        params.data.num +'%}' ;
                    return str;
                },
                rich: {
                    a: {
                        color: '#6E7079',
                        align: 'center',
                        fontWeight: 'bold',
                    },
                    per: {
                        color: '#333333',
                        fontSize: 14,
                        fontWeight: 'bold',
                    },
                },
            },
            labelLine: {
                show: false
            },
            data: [
                { value: 0, name: '新注册用户',num:'10'},
            ]
            }
        ]
    }
// 监听数据更新来更新图表 可以响应式更新图表内容
// watch(EnterpriseDistributionlabel, () => {
//     baseChart.setOption(optionObj)
// })
return optionObj
}
</script>

<style lang="scss" scoped>
.containerBox{
    width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 10px;
    padding: 10px;
    border-radius: 4px;
    .leftCon{
        width: 60%;
        float: left;
        margin-right: 20px;
        >div{
            border: 1px solid #efefef;
            box-shadow: 0 0 10px #999!important;
            box-sizing: border-box;
            margin-bottom: 20px;
        }
        .leftListCon{
            min-height: 300px;
        }
    }
    .rightCon{
        width: calc(40% - 20px);
        float: right;
        >div{
            border: 1px solid #efefef;
            box-shadow: 0 0 10px #999!important;
            box-sizing: border-box;
            margin-bottom: 20px;
        }
        .rightListCon{
            width: 100%;
            padding-bottom: 20px;
            .toMorePage{
                width: 25%;
                float: left;
                text-align: center;
                color: #1890ff;
                cursor: pointer;
                line-height: 60px;
                span:hover{
                    border-bottom: 1px solid #1890ff;
                }
                
            }
            .chart-box{
                width: 200px;
                height: 300px;
            }
        }
    }
    .leftTitle{
        font-size: 18px;
        color: #333;
        float: left;
    }

}
.toplist{
    padding: 10px;
    margin: 0 10px;
    box-sizing: border-box;
    .leftFloat{
        width: 60%;
        .benchCardCenter{
            width: 33%;
            float: left;
            padding: 10px;
            color: #999;
            font-size: 14px;
            text-align: center;
            p{
                margin-bottom: 10px;
            }
            .price-box{
                font-size: 36px;
                color: #333;
                letter-spacing: -1px;
            }
        }
    }
    .rightFloat{
        width: 40%;
        .benchCardCenter{
            width: 33%;
            float: right;
            padding: 10px;
            color: #999;
            font-size: 14px;
            text-align: center;
            p{
                margin-bottom: 10px;
            }
            .price-box{
                font-size: 36px;
                color: #333;
                letter-spacing: -1px;
            }
        }
    }
}
</style>